<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas实现PC画板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-size: cover;
            background-attachment: fixed;
        }

        .container {
            margin: 30px;
        }

        #cavs {
            border: 2px solid indianred;
            border-radius: 10px;
            box-shadow: 10px 10px 5px #999999;
            margin-bottom: 20px;
        }

        .container ul {
            width: 700px;
            text-align: center;
        }

        .container ul li {
            display: inline-block;
            margin-left: 35px;
        }

        .container ul li input {
            background-color: yellow;
            color: black;
            border: none;
            padding: 6px 15px;
            font-size: 16px;
            border-radius: 25px;
            cursor: pointer;
            transition-duration: 0.2s;
        }

        .container ul li input:hover {
            border: 1px solid #aaaa;
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.25);
        }
    </style>
</head>

<body>
    <div class="container">
        <canvas id="cavs" width="700" height="333"></canvas>
        <ul id='btn_container'>
            <li><input type="color" id="colorChange"></li>
            <li><input type="button" id="clear" value="清屏"></li>
            <li><input type="button" id="eraser" value="橡皮"></li>
            <li><input type="button" id="revoke" value="撤销"></li>
            <li><input type="range" id="lineRuler"></li>
            <li><span id="showRange"></span></li>
        </ul>
    </div>
</body>

</html>
<script>
    /*
     * drawing board lei.xue
     * 开发方式三种
     * 单对象
     * 立即执行函数
     * let
    */


    var drawingBoard = {
        cavs: document.getElementById("cavs"),
        ctx: document.getElementById("cavs").getContext('2d'),
        btn_container: document.getElementById('btn_container'),
        colorChange: document.getElementById("colorChange"),
        lineRuler: document.getElementById("lineRuler"),
        showRange: document.getElementById("showRange"),
        arrImageDate: [],
        bool: false,
        clearFlag:false,
        init: function () {
            this.ctx.lineCap = "round";//线条的头尾样式
            this.ctx.lineJoin = "round";//线条平滑样式
            this.drawing();
            this.btnsAllFn();
        },
        btnsAllFn: function () {
            var self = this;

            self.btn_container.onclick = function (e) {
                switch (e.target.id) {
                    case 'clear':
                        if(!self.clearFlag){
                            self.arrImageDate.push(self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight));
                            self.clearFlag = true;
                        }
                        self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
                        break;
                    case 'eraser':
                        //画背景色
                        self.ctx.strokeStyle = "#ffffff";
                        break;
                    case 'revoke':
                        //每次抬起鼠标是 把当前画板内容保存起来,撤销就是恢复最后一张图片数据
                        console.log(self.arrImageDate);
                        if (self.arrImageDate.length > 0) {
                            var img = self.arrImageDate.pop();
                            self.ctx.putImageData(img, 0, 0);
                        }
                        break;
                }
            }
            this.colorChange.onchange  = function () {
                self.ctx.strokeStyle = this.value;
            }
            this.lineRuler.onchange = function(){
                self.showRange.innerText =  1 + Math.floor(self.lineRuler.value / 5);
            }
        },
        drawing: function () {
            var self = this;
            var c_left = cavs.offsetLeft;
            var c_top = cavs.offsetTop;
            self.showRange.innerText =  1 + Math.floor(self.lineRuler.value / 5);

            self.cavs.onmousedown = function (e) {
                self.ctx.lineWidth = 1 + Math.floor(self.lineRuler.value / 5);
                self.arrImageDate.push(self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight));
                self.bool = true;
                self.clearflag = false;
                self.ctx.beginPath();
                self.ctx.moveTo(e.pageX - c_left, e.pageY - c_top);
            }
            self.cavs.onmousemove = function (e) {
                if (self.bool) {
                    self.ctx.lineTo(e.pageX - c_left, e.pageY - c_top);
                    self.ctx.stroke();
                }
            }
            self.cavs.onmouseup = cavsEnd;
            self.cavs.onmouseleave = cavsEnd;
            function cavsEnd(e) {
                if (self.bool) {

                    self.bool = false;
                    self.ctx.closePath();
                }
            }
        }
    }
    drawingBoard.init();
</script>